<template>
 <div > 
   <!--h3 id="bt">
     
     消息通知 </h3-->
    <van-nav-bar
  title="消息通知"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>   

   <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>


<van-MessBackutton id="fk" type="danger"  to="/MessBack" style="display:MessBacklock;margin:0 auto">反馈消息</van-MessBackutton>
     </div> 
</template>

<script>

export default {
  data() {
    return {
      list: [
        <van-notice-bar mode="link" left-icon="volume-o">社区解封啦</van-notice-bar>,
        <van-notice-bar mode="link" left-icon="volume-o">超市来新货了</van-notice-bar>,
        <van-notice-bar mode="link" left-icon="volume-o">集体做核酸</van-notice-bar>,
        <van-notice-bar mode="link" left-icon="volume-o">在外的近期不要回社区</van-notice-bar>
      ],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 0; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 0) {
          this.finished = true;
        }
      }, 1000);
    },
     onClickLeft() {
     
      this.$router.go(-1);
    },
  },
  
   
   
    
};
</script>

<style>
#bt{
  text-align: center;
  background-color: blue;
  height: 30px;
}
#fk{
  text-align: center;
}
#fh{
  text-align: left;
}
</style>



